<template>
	<view>
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">课时详情</text>
			</view>
		</view>
		
		<view class="keshixinxi">
			<view class="tiao"></view>
			<text class="xinxi">2020年12月</text>
		</view>
		
		<view class="qi">
			
			<view class="xingqi">
				<text v-for="(item,index) in xingqi" :key="index" class="rizi">{{item.name}}</text>
			</view>
			
			<view class="riqi">
				<text v-for="(item,index) in dataList" :key="index" class="today">{{item.shu}}</text>
			</view>
			
		</view>
		
		<view class="daka">
			<view class="leftka">
				<view class="topban">
					<view class="coursename">
						<view class="kecheng">课程</view>
						<text class="kechengname">基础钢琴课</text>
					</view>
					<view class="jioashi">
						8:00-9:00 | A教室
					</view>
				</view>
				<view class="bottomstudent">
					学生：小明、小张、小孙 >
				</view>
			</view>
			<view class="rightka">
				<text>去打卡</text>
				<image src="../../../../static/teacherimg/go.png" mode="" class="qudaka"></image>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xingqi:[
					{name:'日'},
					{name:'一'},
					{name:'二'},
					{name:'三'},
					{name:'四'},
					{name:'五'},
					{name:'六'},
				],
				dataList:[
					{shu:'1'},
					{shu:'2'},
					{shu:'3'},
					{shu:'4'},
					{shu:'5'},
					{shu:'6'},
					{shu:'7'},
				],
				
				daka:[
					
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	.keshixinxi{
		width: 690rpx;
		height: 32rpx;
		margin: auto;
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.tiao{
		width: 5rpx;
		height: 19rpx;
		border-radius: 2.5rpx;
		background:#8DCE2A;
	}
	.xinxi{
		font-size: 32rpx;
		color: #333333;
		line-height:32rpx;
		margin-left:16rpx;
		font-weight: bold;
	}
	
	.qi{
		width: 600rpx;
		height: 150rpx;
		margin: auto;
		margin-top:30rpx;
		display: flex;
		flex-direction:column;
		column-count: 2;
		justify-content:space-between;
		align-items: center;
	}
	.xingqi,.riqi{
		width: 100%;
		height: 30rpx;
		display: flex;
		flex-direction:row;
		justify-content:space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
    .rizi,.today{
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height:40rpx;
	}
	.today{
		border-radius: 50%;
	}
	.daka{
		width: 690rpx;
		height: 250rpx;
		margin: auto;
		margin-top: 80rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-shadow:0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.16);
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
	}
	
	.leftka{
		width: 399rpx;
		height: 100%;
		margin-left:30rpx;
	}
	.topban{
		width:100%;
		height:160rpx;
		border-bottom:1rpx solid #F5F5F5;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.coursename{
		width: 100%;
		height: 32rpx;
		display: flex;
		flex-direction:row;
	}
	.jioashi{
		width: 100%;
		height: 32rpx;
		color: #777777;
		font-size: 28rpx;
	}
	.kecheng{
		width: auto;
		height: 100%;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-radius:6rpx;
		background: #8DCE2A;
		color: #FFFFFF;
		font-size: 24rpx;
		margin-right: 20rpx;
	}
	.kechengname{
		width: auto;
		height: 100%;
		color: #333333;
		font-size: 28rpx;
		line-height: 30rpx;
		font-weight: bold;
	}
	
	.bottomstudent{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.rightka{
		width: 130rpx;
		height: 100%;
		margin-right: 20rpx;
		display: flex;
		flex-direction:row;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #8DCE2A;
	}
	.qudaka{
		width: 11rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
	
</style>
